<template>
    <div class="copy_box">
        <el-tooltip v-if="type == 1" class="item" effect="dark" :hide-after="0" :content="id" placement="top">
            <span class="icon_tx blue" @click="gotoNext(id)">{{ id }}</span>
        </el-tooltip>
        <el-tooltip v-if="type == 2" class="item" effect="dark" :hide-after="0" :content="id" placement="top">
            <p :class="{ 'blue': !isblue }" @click="goAddress(id)">
                {{ show ? id : subAddress(id) }}
            </p>
        </el-tooltip>
        <el-tooltip v-if="type == 3" class="item" effect="dark" :hide-after="0" :content="id" placement="top">
            <p :class="{ 'blue': !isblue }" @click="goTokenAddress(id)">
                {{ show ? id : subAddress(id) }}
            </p>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :hide-after="0" :content="flag ? 'Copied' : ' Copy '" placement="top">
            <div :class="flag ? 'copyimg right' : 'copyimg'" @click="clickBtn(id)"></div>
        </el-tooltip>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import useClipboard from 'vue-clipboard3'
import { subAddress } from '@/utils/util'
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps({
    id: String,
    type: Number,
    isblue: Boolean,
    show: Boolean,
    contract: String
});

const flag = ref(false)

const gotoNext = (e) => {
    router.push(`/tx/${e}`)
}

const goAddress = (e) => {

    router.push(`/address/${e}`)
}

const goTokenAddress = (e) => {
    console.log(router)
    router.push(`/token/${props.contract}?a=` + e)
}



const clickBtn = async (str) => {
    const { toClipboard } = useClipboard()
    try {
        await toClipboard(str);
        flag.value = true;
        let time = setTimeout(() => {
            flag.value = false;
            clearTimeout(time)
        }, 2000)
    } catch (e) {
        ElMessage({
            message: 'Copy error',
            type: 'error',
        })
    }
}

</script>

<style lang="less" scopeds>
.copy_box {
    display: flex;
    align-items: center;

    .copyimg {
        margin-left: 3px;
        width: 15px;
        flex: 0 0 15px;
        height: 15px;
        background-color: #AFB5BC;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        mask-image: url('../../assets/img/copy.svg');
        -webkit-mask-image: url('../../assets/img/copy.svg');
        cursor: pointer;

        &:hover {
            background-color: var(--primary-color);
        }
    }

    .right {
        mask-image: url('../../assets/img/copy1.png');
        -webkit-mask-image: url('../../assets/img/copy1.png');
        background-color: var(--primary-color);
    }

    .icon_tx {
        cursor: pointer;
        line-height: 20px;
        height: 20px;
        overflow: hidden;
        max-width: 120px;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
}
</style>